import { StyleSheet, Text, View, FlatList, Image, Pressable, Linking } from 'react-native';
import React from 'react';
import { useCameraPermission } from 'react-native-vision-camera';
import { useNavigation } from '@react-navigation/native';
import Icon from 'react-native-vector-icons/Ionicons';
import { useTranslation } from 'react-i18next';
import { observer, userStore } from '~/store';
import { ContentStatus, NavBarHeader } from '~/components';
import { px2dp, scale, width } from '~/utils/px2dp';
import { formatTimestamp } from '~/utils/formatDate';
import { useBindDeviceList } from '~/common';
import { yjhDevices } from '~/utils/deviceMenues';

export default observer(() => {
    const { t } = useTranslation();
    const navigation: any = useNavigation();
    useBindDeviceList();
    const { hasPermission, requestPermission } = useCameraPermission();
    const goAddDevice = () => {
        if (hasPermission) {
            navigation.navigate('ScanBleDevice');
        } else {
            requestPermission();
        }
    };
    const renderItem = ({ item }) => {
        let name = item.device_name;
        if (
            item.device_code.includes('HA05') ||
            item.device_code.includes('HA06') ||
            item.device_code.includes('HA08') ||
            item.device_code.includes('HA03')
        ) {
            name = t('BindDeviceList.t1');
        } else if (yjhDevices.indexOf(item.device_code) !== -1) {
            name = t('BindDeviceList.t2');
        } else {
            name = t('BindDeviceList.t3');
        }
        return (
            <Pressable
                style={[styles.litItem, styles.row, styles.between]}
                onPress={() => navigation.navigate('DeviceInfo', { device_sn: item.device_sn })}>
                <View style={styles.row}>
                    <Image style={styles.deviceImage} source={{ uri: item.device_image }} resizeMode="contain" />
                    <View style={styles.info}>
                        <Text style={styles.t1}>
                            {item.device_sn.substring(13)} {name}
                        </Text>
                        <Text style={[styles.device_sn, { marginVertical: px2dp(12) }]}>
                            {t('BindDeviceList.t4')}：{item.device_sn}
                        </Text>
                        <Text style={styles.device_sn}>
                            {t('BindDeviceList.t5')}：{formatTimestamp(item.bind_time)}
                        </Text>
                    </View>
                </View>
                <Icon name="chevron-forward-outline" size={px2dp(40)} color={'#a4a4a4'}></Icon>
            </Pressable>
        );
    };
    return (
        <View style={styles.container}>
            <NavBarHeader
                title={t('BindDeviceList.t6')}
                rightComponent={
                    <Pressable onPress={goAddDevice} style={{ marginRight: px2dp(32) }}>
                        <Icon name={'scan-outline'} size={px2dp(50)} color={'#000'}></Icon>
                    </Pressable>
                }
            />
            <FlatList
                keyExtractor={(item) => item.id}
                showsVerticalScrollIndicator={false}
                data={userStore.userBindDeviceData}
                renderItem={renderItem}
                contentContainerStyle={styles.contentContainerStyle}
                ListEmptyComponent={() => <ContentStatus status="empty" />}
            />
            <Pressable style={[styles.bindDevice]} onPress={() => navigation.navigate('BuyMall')}>
                <Text style={styles.bt_text}>{t('BindDeviceList.t7')}</Text>
            </Pressable>
        </View>
    );
});

const styles = StyleSheet.create({
    row: {
        flexDirection: 'row',
        alignItems: 'center',
    },
    between: {
        justifyContent: 'space-between',
    },
    container: { flex: 1 },
    contentContainerStyle: {
        flexGrow: 1,
        paddingBottom: '40%',
        margin: px2dp(24),
    },
    litItem: {
        backgroundColor: '#fff',
        marginBottom: px2dp(24),
        padding: px2dp(24),
        borderRadius: px2dp(24),
    },
    deviceImage: {
        width: px2dp(120),
        height: px2dp(140),
    },
    info: {
        marginLeft: px2dp(24),
    },
    t1: {
        fontSize: scale(30),
        fontWeight: 'bold',
        color: '#000',
    },
    device_sn: {
        fontSize: scale(28),
        color: '#a4a4a4',
    },
    bindDevice: {
        position: 'absolute',
        bottom: '10%',
        alignItems: 'center',
        justifyContent: 'center',
        width: width - px2dp(64),
        backgroundColor: '#FF5D27',
        height: px2dp(100),
        borderRadius: px2dp(50),
        alignSelf: 'center',
    },
    bt_text: {
        color: '#fff',
        fontSize: scale(30),
    },
});
